<template>
  <div class="oeder_confirm">
    <van-sticky>
      <van-nav-bar title="订单确认" left-arrow @click-left="back" />
    </van-sticky>
    <div class="flex goods">
      <div class="pic" style="background-size: 100% 100%; background: no-repeat;" >
		  <img style="width: 100%; height: 100%;" :src="detail.packageImg?detail.packageImg:detail.goodsImg" alt="">
	  </div>
      <div class="infor">
        <h6 class="name">{{detail.packageName?detail.packageName:detail.goodsName}}</h6>
        <p class="type" v-if="detail.serviceName">服务项目： {{detail.serviceName}}</p>
        <p class="type" v-if="detail.discount">{{detail.discount}}:{{detail.discountPrice}}</p>
        <p class="price">¥{{detail.orderPrice}}</p>
      </div>
    </div>

    <div class="address flex" v-if="address.length > 0 || detailAddress" @click="toAddress">
      <van-icon name="location" color="#2a80ff" size="0.5rem" />
      <div class="infor">
        <p class="name">
          <span>{{detailAddress.realName}}</span>
		  &nbsp;
          <span>{{detailAddress.cellPhone}}</span>
          <!-- <span>{{detailAddress.email}}</span> -->
        </p>
        <div class="place flex">
          <p>{{detailAddress.address}}</p>
          <van-icon name="arrow" />
        </div>
      </div>
    </div>

    <div @click="toAddress" class="no_address" v-else>
      <span class="icon_add">+</span>
      <span>添加地址</span>
    </div>

    <div class="tips">
      <h4 class="title">温馨提示</h4>
      <p class="text">在您订单付款之后，我们的工作人员会在工作日的2个小时内联系您，请您保持电话畅通</p>
      <p class="text">订单付款之后，即可申请开发票，发票我们将以邮寄/发送邮箱的方式给您</p>
    </div>

    <div class="footer_bar">
      <span class="price"><small>¥ </small>{{detail.orderPrice}}.00</span>
      <span class="btn" @click="createOrder">提交订单</span>
    </div>
  </div>
</template>

<script>
import api from 'api/api'
import { mapMutations } from 'vuex'
export default {
  data () {
    return {
      detail: {},
      address: [],
      detailAddress: ''
    }
  },
  created () {
	  console.log('id',this.$route.params.id)
    this.getData()
	//回传地址
	var address = JSON.parse(localStorage.getItem('address'))
	if(address){
		this.detailAddress=address
		localStorage.removeItem('address')
		return
	}
	
    this.getAddress()
   
   
   
  },
  mounted() {
	
  },
  methods: {
    ...mapMutations(['UPDATA_ORDERINFOR']),
    getData () {
		console.log(this.$route.params)
      var type = this.$route.params.type
      if (type == 'good') {
        api.goodsConfirm({
          data: {
            id: this.$route.params.id
          }
        }).then(res => {
				console.log('goods',res.data)
          this.detail = res.data
        })
      }
      if (type == 'package') {
        api.orderConfirm({
          data: {
            id: this.$route.params.id
          }
        }).then(res => {
          this.detail = res.data
        })
      }
    },
    createOrder () {
      var type = this.$route.params.type
	  // console.log(this.detailAddress,'测试111')
	 //  if(!this.detailAddress){
		// this.$toast('请选择收获地址')
		// return
		// this.detailAddress.id=''
	 //  }
	
      api.orderPlace({
        data: {
          id: this.$route.params.id,
          orderType: type.toLocaleUpperCase(),
          addressId: this.detailAddress?this.detailAddress.id:'',
          description: ''
        }
      }).then(res => {
		  // console.log(res)
		  if(res.code==200){
			  this.UPDATA_ORDERINFOR(res.data)
			  this.$router.push('/pay/' + res.data.orderNo)
		  }
      
      })
	  
    },
    getAddress () {
      api.addressList().then(res => {
        this.address = res.data.records
        var defalut = this.address.filter(res => {
          return res.deft == 1
        })
		console.log(this.address,defalut)
        this.detailAddress = defalut[0] || this.address[0]
		
      })
    },
    toAddress () {
      this.$router.push('/addressSelect')
    },
    back () {
      window.history.go(-1)
    }
  }
}
</script>

<style lang="scss">
.oeder_confirm {
  min-height: 100vh;
  font-size: 0.28rem;
  text-align: left;
  background-color: #f5f5f5;
  .goods {
    background-color: #fff;
    padding: 0.31rem;
    margin-bottom: 0.18rem;
    .pic {
      width: 1.85rem;
      height: 1.85rem;
      flex: none;
    }
    .infor {
      flex: auto;
      margin-left: 0.31rem;
      .name {
        font-size: 0.37rem;
        margin-bottom: 0.2rem;
      }
      .type {
        font-size: 0.22rem;
        margin-bottom: 0.15rem;
        line-height: 1;
      }
      .price {
        font-size: 0.36rem;
        color: #ff344c;
        line-height: 1;
      }
    }
  }

  .address {
    padding: 0.32rem;
    background-color: #fff;
    align-items: center;
    background-image: url("../../assets/img/home/sjbj.png");
    background-repeat: no-repeat;
    background-size: 100% 0.05rem;
    background-position: top left;
    font-size: 0.24rem;
    .infor {
      margin-left: 0.2rem;
      .name {
        margin-bottom: 0.25rem;
      }
      .place {
        .van-icon {
          margin-top: 0.05rem;
        }
      }
    }
  }
  .no_address {
    padding: 0.32rem;
    background-color: #fff;
    align-items: center;
    background-image: url("../../assets/img/home/sjbj.png");
    background-repeat: no-repeat;
    background-size: 100% 0.05rem;
    background-position: top left;
    font-size: 0.24rem;
    .icon_add {
      width: 0.2rem;
      height: 0.2rem;
      line-height: 0.2rem;
      text-align: center;
      background-color: #3382ef;
      color: #fff;
      padding: 0 0.06rem;
      border-radius: 0.04rem;
      margin-right: 0.1rem;
    }
  }
  .tips {
    margin-top: 0.18rem;
    background-color: #fff;
    padding: 0.31rem;
    .title {
      color: #ff344c;
      font-size: 0.32rem;
    }
    .text {
      position: relative;
      padding-left: 0.25rem;
      margin-top: 0.2rem;
      &::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0.15rem;
        width: 0.1rem;
        height: 0.1rem;
        border-radius: 50%;
        background-color: #ff344c;
      }
    }
  }
  .footer_bar {
    position: fixed;
    display: flex;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 9;
    line-height: 0.98rem;

    .price {
      width: 50%;
      background-color: #fff;
      font-size: 0.36rem;
      color: #ff344c;
      text-decoration: 2em;
      text-indent: 2em;
    }
    .btn {
      width: 50%;
      text-align: center;
      background: linear-gradient(
        96deg,
        rgba(72, 143, 240, 1),
        rgba(51, 130, 239, 1)
      );
      font-size: 0.36rem;
      color: #fff;
    }
  }
}
</style>